<template>
  <div class="background">

    <Row :style="page_height" type="flex" justify="center" class="code-row-bg">
      <i-col span="4">

        <div style="width:100%; text-align: center; margin-top:75%; margin-bottom:20px;">
          <img src="../assets/logo.png" style="width:80%;"/>
        </div>

        <Form ref="loginFormValidate" :model="loginFormValidate" :rules="loginRuleValidate">
          <Form-item prop="phoneNum">
            <Input v-model="loginFormValidate.phoneNum" type="text" placeholder="请输入手机号"/>
          </Form-item>
          <Form-item prop="password">
            <Input v-model="loginFormValidate.password" type="password" placeholder="请输入密码" @keyup.native.enter="handleLoginSubmit('loginFormValidate')"/>
          </Form-item>

          <Row style="margin-top:-5px;">
            <i-col span="12">
              <Checkbox-group v-model="loginFormValidate.remember">
                <Checkbox style="color: azure;" label="记住我"/>
              </Checkbox-group>
            </i-col>
            <i-col span="12">
              <!--<a style="float:right" @click="toRegister">新用户注册</a>-->
            </i-col>
          </Row>
        </Form>

        <Button style="margin-top:10px;" type="primary" size="large" long @click="handleLoginSubmit('loginFormValidate')">登 录</Button>
        <small style="text-align: center; display:block; margin-top: 5px">@copyright by DtDream</small>
      </i-col>

    </Row>


  </div>
</template>
<script>
//  import { mapGetters } from 'vuex'
import authApi from '../api/axios/authApi'

  export default {
    data () {
      return {
        page_height:'height:' + window.innerHeight + 'px',
        loginFormValidate: {
          phoneNum: '',
          password: '',
          remember: []
        },
        loginRuleValidate: {
          phoneNum: [
            {required: true, message: '手机号错误',pattern: /^1[34578]\d{9}$/, trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
//      ...mapGetters({loginSessionAuthState: 'auth/getLoginSessionState'})
      loginSessionAuthState (){
        return this.$store.getters['auth/getLoginSessionState'];
      }
    },
    methods:{
      handleLoginSubmit (loginFormValidate){
        let that = this;
        this.$refs[loginFormValidate].validate((valid) => {
          if (valid) {
            authApi.login({
              phoneNum: that.loginFormValidate.phoneNum,
              password: that.loginFormValidate.password
            },{
              success (res) {
                if (res.data.status === 200) {

                  let data = {online: true, token: res.data.data.token, name: res.data.data.name, id: res.data.data.id};
                  that.$store.commit('auth/updateSessionMutation',data);

                  if (that.loginFormValidate.remember.length > 0){
                    that.$store.commit('auth/rememberMutation');
                  }

                }else {
                  let data = {online: false, token: "", name: "", id: 0};
                  that.$store.commit('auth/updateSessionMutation',data);
                }
              }
            });

//            this.$store.dispatch('auth/login', this.loginFormValidate);
//            this.$refs[loginFormValidate].resetFields();
          } else {
            this.$Message.error('请重新登录');
          }
        })
      },
      initAuthState (){
        /**
         * 监控loginSession 若已经登录，返回首页
         */
        if (this.loginSessionAuthState.online) {
          this.$router.push('/');
        }
      }
    },watch: {
      loginSessionAuthState: function (newLoginSession) {
        if (newLoginSession.online){
          this.$router.push('/');
        }else {
          this.$Message.error('账号或密码错误');
        }
      }
    },created () {
      this.initAuthState();
    }
  }
</script>
<style>
  .background {
    background-image: url("../assets/background.png");
    background-size: 100% 100%;
  }
</style>
